<template>

  <el-card>
    <div class="topic">
      <div class="title">
        {{ title }}
      </div>
      <div class="description">
        {{ description }}
      </div>
      <div class="fraction">
        <el-rate
            size="large"
            v-model="fraction"
            :texts="['差', '中', '良', '好', '优秀']"
            show-text
            @click="$emit('update:fraction', fraction)"
        />
      </div>
    </div>
  </el-card>

</template>

<script>
import {reactive, toRef, toRefs} from "vue";

export default {
  name: "TopicElement",
  props: {
    title: String,
    description: String,
    topicId: Number,
    type: String,
    fraction: Number
  },
  setup(props) {
    return {}
  }
}
</script>

<style scoped>
.topic {
  margin: 10px;
  max-width: 1000px;
  padding-top: 20px;
  padding-left: 30px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  font-synthesis: style;
}

.description {
  margin-top: 10px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
  font-size: 15px;
  color: #121212;
}

.fraction {
  width: 200px;
  margin: 40px 20px 10px 700px
}
</style>